<template>
    <div>
        <div>
           <div id="head">
               <div id="title">
                   <router-link to="/">
                       <el-col>
                           <div class="demo-basic--circle">
                               <div class="block"><el-avatar :size="60">
                                   <img src="../../../public/image/title.jpg" height="60" width="60"/></el-avatar>
                               </div>
                           </div>
                       </el-col>
                   </router-link>
               </div>
               <div id="info">
                   <p><span>ID: {{clerk.clerkId}}</span></p>
                   <p><span>用户名: {{clerk.clerkName}}</span></p>
                   <p><span>职位: {{role.roleName}}</span></p>
               </div>
               <span id="out">
                        <el-button type="text" @click="dialogVisible = true,querySelid()" style="font-size: 12px">修改密码</el-button>
                        <el-dialog
                                title="提示"
                                :visible.sync="dialogVisible"
                                width="30%"
                                :before-close="handleClose">
                            <ul>
                                <li>请输入旧密码:<el-input
                                        placeholder="请输入内容"
                                        v-model="upwd.oldpwd"
                                        show-password
                                        disabled="false">
                                            </el-input>
                                </li>
                                <li>
                                    请输入新密码:<el-input
                                        placeholder="请输入内容"
                                        v-model="upwd.newpwd"
                                        show-password>
                                            </el-input>
                                </li>
                                <li>
                                    请再次输入密码:<el-input
                                        placeholder="请输入内容"
                                        v-model="upwd.clerkPassword"
                                        show-password>
                                            </el-input>
                                </li>
                            </ul>
                            <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false" round>取 消</el-button>
                            <el-button type="primary" round @click="dialogVisible = false,queryUpwd()">确 定</el-button>
                            </span>
                        </el-dialog>
                   <router-link class="operation" to="/login">退出</router-link>
               </span>
           </div>
        </div>
        <div id="left">
            <router-link to="/index/chart" class="local">
            <div id="logo" @click="toRightHome()">
                <span>米豆云餐饮平台</span>
            </div>
            </router-link>

            <div >
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#232429"
                        text-color="#babcc4"
                        active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-operation"></i>
                            <span class="local">菜品管理</span>
                        </template>
                        <router-link to="/index/dishesManagement" class="local">
                            <el-menu-item  index="1-1">
                                <i class="el-icon-s-order"></i>
                                菜单管理</el-menu-item>
                        </router-link>
                        <router-link to="/set-meal" class="local" >
                            <el-menu-item index="1-2">
                                <i class="el-icon-document"></i>
                                套餐管理</el-menu-item>
                        </router-link>
                        <el-menu-item class="local" index="1-3">
                            <i class="el-icon-document-checked"></i>
                            菜品分类管理
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-custom"></i>
                            <span class="local" >员工管理</span>
                        </template>
<!--                        <router-link to="/index/work" class="local">-->
<!--                            <el-menu-item  index="2-1" >-->
<!--                                <i class="el-icon-document"></i> 员工信息-->
<!--                            </el-menu-item>-->
<!--                        </router-link>-->
                        <router-link to="/index/staff" class="local">
                            <el-menu-item  index="2-2">
                                <i class="el-icon-tickets"></i>员工管理
                            </el-menu-item>
                        </router-link>

                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-s-home"></i>
                            <span class="local">店铺管理</span>
                        </template>
                        <router-link to="/index/shop" class="local">
                            <el-menu-item  index="3-1" >
                                <i class="el-icon-s-data"></i> 店铺信息
                            </el-menu-item>
                        </router-link>
                        <router-link to="/index/coupon" class="local">
                        <el-menu-item  index="3-2">
                            <i class="el-icon-tickets"></i>优惠卷信息
                        </el-menu-item>
                        </router-link>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-notebook-2"></i>
                            <span class="local">订单管理</span>
                        </template>
                        <router-link class="local" to="/index/order">
                            <el-menu-item  index="4-1" >
                                <i class="el-icon-shopping-cart-2"></i>全部订单
                            </el-menu-item>
                        </router-link>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-bank-card"></i>
                            <span class="local">桌台管理</span>
                        </template>
                        <router-link to="/index/desk" class="local"><el-menu-item  index="5-1">
                            <i class="el-icon-document-add"></i>
                            桌台详情</el-menu-item></router-link>
                        <router-link to="/index/appointment" class="local"><el-menu-item  index="5-2">
                            <i class="el-icon-phone-outline"></i>
                            桌台预定</el-menu-item></router-link>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span class="local">会员管理</span>
                        </template>
                        <router-link to="/index/vip" class="local">
                            <el-menu-item  index="6-1">
                                <i class="el-icon-document"></i>
                                会员信息</el-menu-item>
                        </router-link>
                    </el-submenu>
                    <el-submenu index="7">
                        <template slot="title">
                            <i class="el-icon-document-add"></i>
                            <span class="local">库存管理</span>
                        </template>
                        <router-link class="local" to="/index/kucun">
                            <el-menu-item  index="7-1">
                                <i class="el-icon-s-order"></i>
                                库存列表</el-menu-item>
                        </router-link>
                    </el-submenu>
                    <el-submenu  index="8">
                        <template slot="title">
                            <i class="el-icon-s-grid"></i>
                            <span >评论管理</span>
                        </template>
                        <router-link class="local" to="/index/comment">
                            <el-menu-item  index="7-1">
                                <i class="el-icon-s-order"></i>
                                评论列表</el-menu-item>
                        </router-link>
                    </el-submenu>
                    <el-submenu index="9" @click="doMessage">
                        <template slot="title">
                            <i v-if="!(messageCount>0)" class="el-icon-s-grid"></i>
                            <i v-if="messageCount>0">{{messageCount}}</i>
                            <span >服务信息</span>
                        </template>
                        <router-link class="local" to="/service-message">
                            <el-menu-item  index="9-1">
                                <i class="el-icon-s-order"></i>
                                服务消息</el-menu-item>
                        </router-link>
<!--                        <router-link class="local" to="/index/comment">
                            <el-menu-item  index="9-2">
                                <i class="el-icon-s-order"></i>
                                联系我们</el-menu-item>
                        </router-link>-->
                    </el-submenu>
                    <el-submenu index="10" @click="doMessage">
                        <template slot="title">
                            <i v-if="!(messageCount>0)" class="el-icon-s-grid"></i>
                            <i v-if="messageCount>0">{{messageCount}}</i>
                            <span >首页</span>
                        </template>
                        <router-link class="local" to="/index">
                            <el-menu-item  index="10-1">
                                <i class="el-icon-s-order"></i>
                                首页</el-menu-item>
                        </router-link>
                    </el-submenu>
                </el-menu>
            </div>
        </div>
        <div id="main">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                clerk: JSON.parse(sessionStorage.getItem("clerk")),
                id:"66666",
                role:"",
                dialogVisible: false,
                upwd:{
                    oldpwd:null,
                    newpwd:null,
                    clerkPassword:null,
                    clerkId:JSON.parse(sessionStorage.getItem("clerk")).clerkId
                },
                webSocket:new WebSocket("ws://localhost:9068/websocket/"+JSON.parse(sessionStorage.getItem("bid"))+"/0"),
                bid:JSON.parse(sessionStorage.getItem("bid")),
                messageCount:null
            }
        },
        mounted() {
            this.queryRole();
            this.socket();
        },
        methods:{
            doMessage(){
                this.$router.push("/service-message")
            },
          toRightHome(){
            this.$router.push('/index/chart');
          },
            socket(){
                this.webSocket.addEventListener('open',()=>{
                    console.log("建立成功")
                })
                this.webSocket.addEventListener("message",(result)=>{
                    this.$message({
                        message: result.data,
                        type: 'success'
                    });
                    this.$axios.post("/service/message/query/count",this.bid).then(result=>{
                        this.messageCount = result.data
                    })
                })
            },
            queryRole(){
                this.$axios.post("/administration/role/query-role",this.clerk.roleId).then(result=> {
                    this.role = result.data
                    sessionStorage.setItem("role",result.data);
                })
            },
            querySelid(){
                this.$axios.post("/administration/clerk/selectId",this.clerk.roleId).then(result=> {
                    this.upwd.oldpwd=result.data[0].clerkPassword
                })
            },
            queryUpwd(){
                if (this.upwd.oldpwd==this.upwd.newpwd){
                    alert("不能使用短时间内用过的密码")
                    this.dialogVisible=true
                    return false
                }
                if (this.upwd.newpwd!=this.upwd.clerkPassword){
                    alert("两次密码输入不一致,请重新输入")
                    this.dialogVisible=true
                    return false
                }
                this.$axios.post("/administration/clerk/queryupwd",this.upwd).then(result=> {
                    if (result.data!=0){
                        alert("修改成功,请重新登录")
                        this.upwd.newpwd=null
                        this.upwd.clerkPassword=null
                        this.$router.push("/login")
                    }
                })
            }
        }
    }
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    #main{
        float: right;
        margin-top: 35px;
        margin-right: 45px;
    }
    #info{
        color: #babcc4;
        width: 170px;
        margin-left: 30px;
        display: inline-block;
        font-size: 12px;
    }
    #info p{
        margin-top: 17px;
    }
    #info p:nth-of-type(2){
        display: inline-block;
    }
    #info p:nth-of-type(3){
        float: right;
    }
    .operation{
        text-decoration: none;
        font-size: 12px;
        color: #6c9af7;
    }
    .operation:nth-of-type(2){
        margin-left: 30px;
    }
    .local{
        font-size: 14px;
        font-family: "微软雅黑";
        text-decoration: none;
    }
    #out{
        float: right;
        margin-right: 80px;
        margin-top: 45px;
    }
    #title{
        float: left;
        margin-top: 10px;
        margin-left: 30px;
    }
    #head{
        float: right;
        justify-content: space-between;
        border-bottom: 1px solid #eeeeee;
        height: 80px;
        width: 84.8%;
    }
    #left{
        width: 15%;
        height: 60em;
        background-color: #232429;
        border-top: 1px solid #eeeeee;
        float: left;
    }
    #logo{
        margin: 30px;
        text-align: center;
        cursor: pointer;

    }
    #logo span{
        font-size: 28px;
        font-family: "微软雅黑";
        font-weight: bolder;
        color: #fb6e38;
    }
    ul li{
        list-style: none;
        font-family: 微软雅黑;
        line-height: 40px;
    }
</style>


<!--
<script>
    export default {
        name: "index",
        methods:{
            dj(url){
                this.$router.push(url);
            }
        }
    }
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    .gen{
        display: flex;
        width: 78vw;
        /*justify-content: space-between;*/
    }
    .one{
        width: 50vm;
    }
    .luyou{
        width: 20vm;
        height: 100px;
        border: 1px solid red;
    }

</style>-->
